<template>
  <div class="search-bo">
    <div class="search">
      <search />
      <!-- 输入框输入事件 向父级暴露方法search事件 ,值为data.value -->
      <input type="text" placeholder="请输入关键字" class="search_input" v-model="data.value" @input="() => {
        $emit('search', data.value)
      }
        ">
      <!-- 取消在iphone端的点击输入框页面变大效果 -->
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    </div>
  </div>

</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { type IEmits } from '../list/emits';
import search from '../icon/search.vue';

defineEmits<IEmits>()

const data = reactive({
  value: ''
})
</script>

<style>
.search_input {
  width: 85%;
  height: 35px;
  outline: none;
  border: none;
}

.search-bo {
  height: 50px;
  width: 100vw;
  background-color: #ededed;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search {
  width: 95%;
  height: 40px;
  border-radius: 5px;
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}
</style>